<!--
 * @Author: your name
 * @Date: 2020-03-20 20:39:35
 * @LastEditTime: 2020-03-20 21:27:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \02点击按钮出现菜单\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #666;
        }
        .menu-btn{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f66;
            border-radius: 50%;
            line-height: 200px;
            text-align: center;
            transition: all .5s ease-out;
        }
        .menu-btn.active{
            visibility: hidden;
            width: 0;
            height: 0;
        }
        .btn{
            position: absolute;
            width: 0;
            height: 0;
            line-height: 100px;
            background-color: rgb(234, 241, 251);
            border-radius: 50%;
            text-align: center;
            transition: all 1s ease-out;
        }
        .btn-wrap{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: all .5s ease-out;
        }
        .btn-text{
            visibility: hidden;
        }
        .btn1{
            left: 0;
            top: 0;
        }
        .btn2{
            right: 0;
            top: 0;
        }
        .btn3{
            left: 0;
            bottom: 0;
        }
        .btn4{
            right: 0;
            bottom: 0;
        }
        .btn-wrap.active>.btn{
            width: 90px;
            height: 90px;
        }
        .btn-wrap.active .btn-text{
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="btn-wrap">
            <div class="btn btn1"><span class="btn-text">首页</span></div>
            <div class="btn btn2"><span class="btn-text">文章</span></div>
            <div class="btn btn3"><span class="btn-text">登录</span></div>
            <div class="btn btn4"><span class="btn-text">注册</span></div>
        </div>
        <div class="menu-btn"><span >菜单</span></div>
    </div>
    <script>
        var oMenuBtn = document.querySelector(".menu-btn");
        var oBtnWrap = document.querySelector(".btn-wrap");
        oMenuBtn.onclick = function(){
            this.className += " active";
            oBtnWrap.style.zIndex = 1;
            oBtnWrap.className += " active" 
        }
    </script>
</body>
</html>